<template>
    <!-- 如果屏幕尺寸足够大，显示 PDF 容器 -->
    <div v-if="isScreenLargeEnough" class="pdf-container">
      <!-- 用于显示 PDF 文件的内嵌框架（iframe），其源 URL 通过属性动态绑定 -->
      <iframe :src="pdfUrl" class="pdf-iframe"></iframe>
    </div>
    <!-- 如果屏幕尺寸不够大，显示禁止访问的提示信息 -->
    <div v-else>
      <lay-result status="failure" title="禁止访问" describe="请在电脑上访问此页面">
      </lay-result>
    </div>
  </template>
  
  <script>
  export default {
    // 定义组件的属性（props），接受一个 PDF 文件的 URL，类型为字符串，且为必填属性
    props: {
      pdfUrl: {
        type: String,
        required: true,
      },
    },
    data() {
      return {
        // 追踪屏幕尺寸是否足够大的布尔值
        isScreenLargeEnough: true,
      };
    },
    methods: {
      // 检查屏幕尺寸的方法，用于更新 isScreenLargeEnough 的值
      checkScreenSize() {
        this.isScreenLargeEnough = window.innerWidth > 768; 
      },
    },
    // 组件挂载到 DOM 上时，首次检查屏幕尺寸，并监听窗口尺寸变化
    mounted() {
      this.checkScreenSize();
      window.addEventListener('resize', this.checkScreenSize);
    },
    // 组件销毁前，移除窗口尺寸变化的事件监听器
    beforeDestroy() {
      window.removeEventListener('resize', this.checkScreenSize);
    },
  };
  </script>
  
  <style scoped>
  /* 设置 HTML 及 BODY 元素的全高，取消默认内外边距，并隐藏溢出内容 */
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
  
  /* 设置应用的全高 */
  #app {
    height: 100%;
  }
  
  /* 设置 PDF 容器的全高 */
  .pdf-container {
    height: 100%;
  }
  
  /* 设置内嵌框架（iframe）的宽度为 100%，高度为 99%，去掉边框，允许溢出内容自动处理 */
  .pdf-iframe {
    width: 100%;
    height: 99%;
    border: none;
    overflow: auto;
  }
  
  /* 提示信息样式 */
  .warning-message {
    text-align: center;
    font-size: 18px;
    color: #333;
    line-height: 1.5;
  }
  </style>